<template>
	<view>
		<view class="addr-list-wrapper">
			<view class="addr-list">
				<view class="addr-item" v-for="(item, index) in addr_list" :key="index" @click="chack_addr(item)">
					<view class="name-and-mobile">
						<text class="name">{{item.name}}</text>
						<text class="">{{item.mobile}}</text>
					</view>
					<view class="addr-info">
						<text>{{$db.getAddrById(item.area_id)}} {{item.address}}</text>
					</view>
					<view class="btns-wrapper">
						<text class="default-addr" v-if="item.is_def == '1'">默认地址</text>
						<text class="cuIcon-delete" @click.stop="delAddr(item)">删除</text>
						<text class="cuIcon-edit" @click.stop="editAddr(item)">编辑</text>
					</view>
				</view>
			</view>
			<view class="add-addr-btn-wrapper">
				<text @click="addAddrClick">添加地址</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addr_list: []
			};
		},
		onShow() {
			this.getData();
		},
		// mounted() {
		// },
		onUnload() {
			uni.$emit('chack_addr', {})
		},
		methods: {
			getData: function() {
				this.$api.getAddrList()
					.then((res) => {
						// console.log(res);
						// console.log(typeof res.status);
						if (res.status) {
							this.addr_list = res.data;
						} else {
							this.$db._ShowToast(res.msg)
						}
					})
					.catch((err) => {
						console.log(err);
					})
			},
			addAddrClick: function() {
				this.$db._NavTo('addAddress_page')
			},
			delAddr: function(item) {
				this.$api.removeAddr({
						id: item.id
					})
					.then((res) => {
						console.log(res);
						if (res.status) {
							this.$db._ShowToast('删除成功', () => {
								this.getData();
							});
						}
					})
					.catch((err) => {
						console.log(err);
					})
			},
			editAddr: function(item) {
				// console.log(item);
				this.$db._NavTo('addAddress_page', {
					id: item.id
				})
			},
			chack_addr: function(item) {
				console.log(item);
				uni.$emit('chack_addr', {
					data: item
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAF9F9;
	}

	.addr-list-wrapper {
		.addr-list {
			border: 1px solid rgba(0, 0, 0, 0);

			.addr-item {
				padding: 0 26rpx;
				border-top: 1px solid rgba(237, 237, 237, 1);
				border-bottom: 1px solid rgba(237, 237, 237, 1);
				background: white;

				&+.addr-item {
					margin: 20rpx 0;
				}

				text {
					font-size: 26rpx;
					font-weight: 500;
					line-height: 26rpx;
					color: rgba(0, 0, 0, 1);
				}

				.name-and-mobile {
					margin-top: 17rpx;

					.name {
						margin-right: 40rpx;
					}
				}

				.addr-info {
					padding: 17rpx 0;
					border-bottom: 1px solid rgba(237, 237, 237, 1);
				}

				.btns-wrapper {
					margin: 17rpx 0;
					display: flex;
					align-items: center;

					.default-addr {
						line-height: 46rpx;
						padding: 5rpx 20rpx;
						overflow: hidden;
						background: #DFBB50;
						border-radius: 10rpx;
						font-weight: 600;
						color: white;
					}

					.cuIcon-delete:before,
					.cuIcon-edit:before {
						padding-right: 10rpx;

					}

					.cuIcon-delete {
						margin-left: auto;
						margin-right: 20rpx;
					}
				}
			}
		}

		.add-addr-btn-wrapper {
			position: relative;
			height: 80rpx;

			text {
				position: fixed;
				left: 0;
				bottom: 0;
				display: block;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #DFBB50;
				color: white;
				font-size: 30rpx;
				font-weight: 600;
			}
		}
	}
</style>